import React from 'react';
import { observer, inject } from 'mobx-react';
import * as _ from '../../util/public/common';
import * as DetailUtil from '../../util/public/detailUtil';
import { getLabel } from '../../util/convert';
import DTable from './DTable';
import DTop from './DTop';
import DPaging from './DPaging';

@inject('globalStore', 'layoutStore')
@observer
export default class DMain extends React.Component {
    constructor(){
        super();
        this.dref = React.createRef();
    }
    componentDidMount(){
        const node = this.dref.current;
        DetailUtil.calculateDetailAreaStyle(jQuery(node).parent());
    }
    render() {
        const { symbol,globalStore,layoutStore } = this.props;
        const groupid = parseInt(symbol.substring(7)) - 1;
        const { JSComplete,commonParam } = globalStore;
        const { isprint } = commonParam;
        const { dataJson,detailMap } = layoutStore;
        if(!detailMap.has(symbol)){
            return <div>{getLabel(514716, "表单中不存在明细表$s，请检查模板配置！").replace("$s", groupid+1)}</div>
        }
        const detailObj = detailMap.get(symbol);
        const { attr,variableMap } = detailObj;
        const allowXScroll = attr.allowscroll === 1 && isprint !== "1" && variableMap.get("forceDisabledScrollX") !== true;
        const detailLayout = dataJson.etables[symbol] || {};
        const supportLockedCol = allowXScroll && parseInt(detailLayout.edlockedcol || -1) > -1 
            && detailLayout.seniorset === "1" && variableMap.get("forceDisabledLocked") !== true;      //存在锁定列，需要解析为左右两部分
        const lockedBtnRow = DetailUtil.judgeLockedBtnRow(allowXScroll, detailLayout);
        let tableDomArr = [];
        const lockedFlagArr = supportLockedCol ? [1,2] : [0];
        lockedFlagArr.forEach(dflag =>{
            tableDomArr.push(<DTable ecId={`${this && this.props && this.props.ecId || ''}_DTable@d7u1di@${symbol}`} symbol={symbol} lockedFlag={dflag} allowXScroll={allowXScroll} lockedBtnRow={lockedBtnRow} />);
        });
        
        return (
            <div ref={this.dref} className={`wf-detail ${isprint !== "1" ? "wf-detail-view" : "wf-detail-print"} wf-detail-${groupid}`}>
                {
                    lockedBtnRow && <DTop ecId={`${this && this.props && this.props.ecId || ''}_DTop@46ealm`} symbol={symbol} detailLayout={detailLayout} />
                }
                <div className="excelDetailTableDiv" id={`dTableArea_${groupid}`} 
                    data-groupid={groupid} data-allowxscroll={allowXScroll} data-supportLockedCol={supportLockedCol}>
                    {tableDomArr}
                </div>
                <DPaging ecId={`${this && this.props && this.props.ecId || ''}_DPaging@xn5bs3`} symbol={symbol} />
            </div>
        )
    }
}